<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.js"></script>
	</head>

	<body>
		
		<!--
			生命周期函数（钩子）就是vue实例在某一个特定时间点自动执行的函数
			生命周期函数并不放在methods里面，而是直接在实例里面即可
			
		-->

		<div id="app">
			{{msg}}
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "lksdghskdghl"
				},
				methods: {
					fun1() {
						console.log('1')
					}
				},
				computed: {
					msg_com() {
						return this.msg + 'zsk'
					}
				},
				beforeCreate: function() {
					console.log(this);
					console.log(this.msg);
					console.log("beforecreate")
				},
				created: function() {
					console.log(this);
					console.log(this.msg);
					console.log("created")
				},
				beforeMount: function() {
					console.log('...............');
					console.log(this.$el);
					console.log("beforeMount")
				},
				mounted: function() {
					console.log(this.$el);
					console.log("mounted")
				},
				beforeDestroy: function() {
					console.log("beforeDestroy")
				},
				destroyed: function() {
					console.log("destroyed")
				},
				beforeUpdate: function() {
					console.log("beforeUpdate")
				},
				updated: function() {
					console.log("updated")
				},
			})
		</script>
	</body>

</html>